<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js10_1事件与事件流</title>
		<style type="text/css">
			#div1, #div2{
				float: left;
				width: 150px;
				height: 100px;
				background-color: cadetblue;
				margin-right: 10px;
				color: white;
				text-align: center;
				padding-top: 20px;
			}
			h1{
				clear: left;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			把鼠标移到这里。快！
		</div>
		
		<div id="div2">
			点击这里！
		</div>
		
		
		<!--点击h1会改变其中的文本内容-->
		<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
		<!--onclick绑定方法-->
		<h1 onclick="changetext(this)">再次请点击该文本</h1>
		
		<!--onblur失去焦点-->
		<input type="text" id="txtOnBlur" value="onblur" title="onblur失去焦点" />
		<!--onfocus得到焦点-->
		<input type="text" id="txtOnFocus" value="onfocus" title="onfocus得到焦点" />
		
		<!--onchange改变值-->
		<input type="text" id="txtOnChange" title="onchange改变值" value="onchange" />
		<select id="slcOnChange">
			<option value="1">第一个</option>
			<option value="2">第二个</option>
		</select>
		
		<!--ondblclick双击-->
		<input type="button" id="btnDbClick" value="测试双击,单击无用" />
		
		<!--onerror-->
		<img src="1.jpg" alt="加载图片文件错误事件onerror" id="imgOnError" />
		
		<!--onkeydown某个键盘的键被按下-->
		<input type="text" id="txtOnKeydown" value="onkeydown" />
		 <!--onkeypress某个键盘的键被松开-->
		<input type="text" id="txtOnKeyup" value="onkeyup" />
		<!--onkeypress某个键盘的键被按下或按住-->
		<input type="text" id="txtOnKeypress" value="onkeypress" />
		
		<!--演示onselect方法-->
		<textarea id="txtOnSelect" cols="30" rows="10">用来测试onselect事件</textarea>
		
		
		<!--演示onreset和onsubmit方法-->
		<form method="post" id="frm1">
			
			<input type="text" name="txtFrm1" id="txtFrm1" value="这里输入点什么吧" placeholder="请输入" />
			<select name="slcFrm" id="slcFrm1">
				<option value="1">选项1</option>
				<option value="2" selected="selected">选项2</option>
			</select>
			
			<button type="reset">重置按钮</button>
			<button type="submit">提交按钮</button>
		</form>
		
		<script type="text/javascript">
			
			/*处理div1的鼠标移入和移出事件*/
			var div1 = document.getElementById('div1');
			div1.onmouseover = function(){
				this.innerHTML = "靴靴！";
			}
			div1.onmouseleave = function(){
				this.innerHTML = "把鼠标移到这里。快！"
			}
			
			// 处理div2的点击事件
			var div2 = document.getElementById('div2');
			div2.onclick = function(){
				var val = this.innerHTML;
				if(val.indexOf("再见") > -1){
					this.style.display = 'none';
				}else if(val.indexOf('谢谢') > -1){
					this.innerHTML = "再见";
				}else if(val.indexOf("再点") > -1){
					this.innerHTML = "谢谢";
				}else if(val.indexOf("再次") > -1){
					this.innerHTML += "<br />再点一次";
				}else if(val.indexOf("点击") > -1){
					this.innerHTML += "<br />再次点击这里"
				}
			}
			
			// h1标签的点击事件绑定的函数
			function changetext(e){
				e.innerHTML = "还是要靴靴!"
			}
			
			// 获取焦点然后失去焦点后触发
			var txtOnBlur = document.getElementById('txtOnBlur');
			txtOnBlur.onblur = function(){
				alert("txtOnBlur失去了焦点");
			}
			
			var txtOnFocus = document.getElementById('txtOnFocus');
			txtOnFocus.onfocus = function(){
				txtOnFocus.value = "得到了焦点"
			}
			
			// 值被修改并失去焦点时
			var txtOnChange = document.getElementById("txtOnChange");
			txtOnChange.onchange = function(){
				alert("txtOnChange的值被修改");
			}
			
			var slcOnChange = document.getElementById('slcOnChange');
			slcOnChange.onchange = function(){
				alert("slcOnChange的值被修改")
			}
			
			// 双击鼠标左键
			var btnDbClick = document.getElementById('btnDbClick');
			btnDbClick.ondblclick = function(){
				alert("双击666");
			}
			
			// 当图片文件加载错误时触发 onerror事件
//			var imgOnError = document.getElementById('imgOnError');
//			imgOnError.onerror = function(){
//				alert("图片不显示啊老湿");
//			}

            // onkeydown 键盘某个键被按下
            var txtOnKeydown = document.getElementById('txtOnKeydown');
            txtOnKeydown.onkeydown = function(){
            	console.log("1.txtOnKeydown现在的值为:" + this.value);
            }
            txtOnKeydown.onkeydown = function(e){
            	console.log("2.txtOnKeydown现在的值为:" + this.value);
            	console.log("2.txtOnKeydown现在按下的键为:" + e.keyCode);
            }
            
            // onkeyup某个键盘的键被松开
            document.getElementById('txtOnKeyup').onkeyup = function(e){
            	console.log("txtOnKeyup被松开的键为:" + e.keyCode);
            } 
            
            
            // onkeypress某个键盘的键被按下或按住.onkepress事件是keydown和keyup的过程
			document.getElementById('txtOnKeypress').onkeypress = function(e){
				console.log("txtOnKeypress按下的键为:" + e.keyCode)
			}
			
			// 页面或图像被加载完毕时执行
			window.onload = function(){
				// 输出1.这个flag在下面的代码声明和赋值。说明这里的代码晚于赋值语句的执行。这里的加载完毕包括js
				console.log("网页加载完毕:flag=" + flag);
			}
			var flag = 1;
			
			// 多个window.onload以最后一个为准
//			window.onload = function(){
//				console.log("网页加载完毕2:flag=" + flag);
//			}
//			
//			flag = 2;
           
            // 某个鼠标按键被按下,0为左键，1为 滚轮，2为右键
            document.onmousedown = function(e){
            	console.log("被按下的鼠标按键为:" + e.button);
            }
            
            // 当鼠标移动时触发
            document.onmousemove = function(e){
            	console.log("鼠标在移动，当前坐标x=" + e.x +",y=" +e.y);
            }
            
            // 某个鼠标被松开
            document.onmouseup = function(e){
            	console.log("被松开的鼠标按键是：" + e.button)
            }
            
            // 窗口被改变尺寸时触发
            window.onresize = function(){
            	console.log("窗口被改变了尺寸,当前尺寸为:" + this.innerWidth + "," +this.innerHeight);
            }
            
            
            // 当文本被选中的时候触发
            var txtOnSelect = document.getElementById('txtOnSelect');
            txtOnSelect.onselect = function(){
            	// 获取页面被选中的文本
            	var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
            	alert('被选中的文字是:' + txt);
            }
            
            // 演示表单的onreset和onsubmit方法
            
            var frm1 = document.getElementById('frm1');
            // 在表单被重置前执行
            frm1.onreset = function(){
            	alert("表单frm1的填入的信息已被重置");
            }
            
            // 在表单被提交前执行
            frm1.onsubmit = function(){
            	alert("表单frm1正在提交，取消这次提交");
            	// 返回false可中断事件执行
            	return false;
            	
            }
            
            // 用户关闭窗口时触发
            // IE浏览器 页面跳转、刷新页面能执行，但关闭浏览器不能执行；
			// firefox 页面跳转能执行，但刷新页面、关闭浏览器不能执行；
			// Safari 刷新页面、页面跳转，关闭浏览器都会执行；
			// Opera、Chrome任何情况都不执行。
            window.onunload = function(){
            	if(!confirm("确定要关闭这个窗口么？"))
            		return false;
            }
            
            
            
		</script>
	</body>
</html>
